<template>
  <div class="main_content AddOrEditPersonal">
    <father-title :title="fatherTitle"></father-title>
    <div class="contentBox">
      <!-- <header-line :title="headerTitle"></header-line> -->
      <div class="middleBox">
        <search-box @clickSearch="search">
          <template slot="left">
            <Input v-model="searchParams.name" placeholder="上报人" clearable></Input>
            <Select v-model="model" style="width:200px" placeholder="性别">
                    <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
          </template>

         
        </search-box>
        <v-table :loading="pageConfig.loading" ref="selection" border :columns="columns" :data="list">
          <template slot-scope="{ row }" slot="status">
            <span>{{status.find((item)=>item.value===row.status).key}}</span>
          </template>
          <template slot-scope="{ row }" slot="operation">
            <Button v-if="$store.state.perms.includes('sys:role:update')" type="primary" size="small" @click="editData(row)">编辑</Button>
            <Button v-if="$store.state.perms.includes('sys:role:delete')" class="button_spacing" type="error" size="small" @click="stopUse(row)">停用</Button>
          </template>
        </v-table>
        <v-page :pageConfig="pageConfig" @refresh="getList"></v-page>
      </div>
    
     
    <AddOrEditModal
        v-model="modalCTL.show"
        :title="modalCTL.title"
        :loading="modalCTL.loading"
        width="50%"
        @on-ok="editPassword">
      <Form
          ref="form"
          :model="formValidate"
          :rules="ruleValidate"
          label-position="left"
          :label-width="100"
          slot="content">
        <FormItem label="故障类型" prop="newPassword">
          <Input type="text" v-model="formValidate.newPassword" placeholder="请输入停车场名称" />
        </FormItem>
        <FormItem label="订单号" prop="confirmPassword">
          <Input type="text" v-model="formValidate.confirmPassword" placeholder="请输入停车场详细地址" />
        </FormItem>
        <FormItem label="描述" prop="confirmPassword">
          <Input type="text" v-model="formValidate.confirmPassword" placeholder="请输入停车费用" />
        </FormItem>
        <FormItem label="详情" prop="confirmPassword" >
          <Input type="text" v-model="formValidate.confirmPassword" placeholder="请输入免费停车时间" />
        </FormItem>
        <FormItem label="图片" prop="confirmPassword" >
         
        </FormItem>
        <FormItem label="用户" prop="confirmPassword" >
          <Input type="text" v-model="formValidate.confirmPassword" placeholder="请输入免费停车时间" />
        </FormItem>
        <FormItem label="联系方式" prop="confirmPassword" >
          <Input type="text" v-model="formValidate.confirmPassword" placeholder="请输入免费停车时间" />
        </FormItem>
        <FormItem label="备注" prop="confirmPassword" >
          <Input type="textarea" v-model="formValidate.confirmPassword" placeholder="请输入免费停车时间" />
        </FormItem>
      </Form>
    </AddOrEditModal>
    </div>
  </div>
</template>

<script>
import {columns, pageConfig, formValidate, ruleValidate, status} from "./pageConfig";
export default {
  name: 'ParkingLot',

  data() {
    return {
      cityList:[
            {
                value:1,
                label:"测试"
            }
        ],
      fatherTitle: "上报记录",
      modalCTL: {
        show: false,
        loading: true,
        title: "详情"
      },
      columns,
      pageConfig,
      formValidate: {...formValidate},
      ruleValidate,
      status,
      list: [
       
      ],
      searchParams:{

      }
      // search
    };
  },

  mounted() {

  },

  computed: {},

  methods: {
    search(){

    },
    addData(){
      this.modalCTL.show = true;
    },
    editData(row){

    },
    stopUse(row){

    },
    getList(){

    }
  }
};
</script>

<style scoped lang="less">
.flexOut{
  display: flex;
  align-items: center;
  // justify-content: space-between;
  /deep/ .ivu-form-item-content{
    display: flex;  
    margin-left: 0!important;
   
    span{
      width: 50px;
      flex-shrink: 0;
      display: inline-block;
      margin-left: 10px!important;
    }
    .icons{
      margin-right: 10px;
    }
  }
}

.AddOrEditPersonal {
  .contentBox{
    overflow-y: scroll;
  
  }
  .form{
    display: flex;
    flex-direction: column;
    width: 800px;
    padding: 20px;
    flex: 1;
  }
}
</style>